<html lang="en" xmlns:th="http://www.thymeleaf.org">

<aside class="sidebar left-sidebar sticky" th:fragment="left-sidebar">
    <button class="hamburger hamburger--spin" type=button id=toggle-menu aria-label=切换菜单>
          <span class=hamburger-box>
            <span class=hamburger-inner>
            </span>
          </span>
    </button>
    <header>
        <div class=site-meta>
            <h1 class=site-name>
                <a href="/" th:title="${site.title}">
                    [[${site.title}]]
                </a>
            </h1>
        </div>
    </header>
    <th:block th:if="${theme.config.leftSidebar.socialSelect == 'social-default'}">
    <ol class=social-menu >
        <th:block th:each="socialsIcon : ${theme.config.leftSidebar.socials}">
        <th:block th:replace="modules/widgets/social-group :: ${socialsIcon.socials_select}" />
        </th:block>
    </ol>
    </th:block>
    <th:block th:if="${theme.config.leftSidebar.socialSelect == 'social-option'}">
        <ol class=social-menu >
            <th:block th:each="socialsOption : ${theme.config.leftSidebar.socialOption}">
                <li th:fragment="email">
                    <a th:href="${socialsOption.socialUrl}" target=_blank th:title="${socialsOption.socialsName}"
                       rel=me>
                        <th:block th:utext="${socialsOption.socialsIcon}"></th:block>
                    </a>
                </li>
            </th:block>
        </ol>
    </th:block>
    <ol class="menu" id="main-menu">

        <th:block th:if="${#lists.isEmpty(theme.config.leftSidebar.menuItem)}">
            <th:block th:with="menu = ${menuFinder.getPrimary()}">
                <th:block th:with="menuItems = ${menu.menuItems}">
                    <li th:each="menuItem : ${menuItems}">
                        <a th:href="@{${menuItem.status.href}}">
                            <img th:src="${#annotations.getOrDefault(menuItem, 'icon','/themes/theme-stack/assets/img/menu.svg')}" th:alt="${menuItem.spec.displayName}" height="20" width="20">
                            <span>
                [[${menuItem.status.displayName}]]
              </span>
                        </a>
                    </li>
                </th:block>
            </th:block>
        </th:block>
        <th:block th:if="${not #lists.isEmpty(theme.config.leftSidebar.menuItem)}">
            <th:block th:with="menu = ${menuFinder.getByName(theme.config.leftSidebar.menuItem)}">
                <th:block th:with="menuItems = ${menu.menuItems}">
                <li th:each="menuItem : ${menuItems}">
                    <a th:href="@{${menuItem.status.href}}">
                        <img th:src="${#annotations.getOrDefault(menuItem, 'icon','/themes/theme-stack/assets/img/menu.svg')}" th:alt="${menuItem.spec.displayName}" height="20" width="20">
                        <span>
                [[${menuItem.status.displayName}]]
              </span>
                    </a>
                </li>
                </th:block>
            </th:block>
        </th:block>
<!--        <div class=menu-bottom-section>-->
            <li id=dark-mode-toggle>
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-toggle-left"
                     width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentcolor"
                     fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="8" cy="12" r="2" />
                    <rect x="2" y="6" width="20" height="12" rx="6" />
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-toggle-right"
                     width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentcolor"
                     fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" />
                    <circle cx="16" cy="12" r="2" />
                    <rect x="2" y="6" width="20" height="12" rx="6" />
                </svg>
                <span>
                暗色模式
              </span>
            </li>
<!--        </div>-->
    </ol>
</aside>
